<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="content-section">
    <h2><i class="fas fa-procedures"></i> 我的病人</h2>
    <div class="search-bar">
        <input type="text" placeholder="输入病人姓名搜索...">
        <button class="search-btn"><i class="fas fa-search"></i> 搜索</button>
    </div>
    <table class="patients-table">
        <thead>
            <tr>
                <th>病历号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>联系电话</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script>
$(document).ready(function() {
    // 页面加载时获取所有病人
    loadPatients();
    
    // 搜索按钮点击事件
    $('.search-btn').click(function() {
        loadPatients();
    });
    
    // 搜索框回车事件
    $('.search-bar input').keypress(function(e) {
        if(e.which == 13) {
            loadPatients();
        }
    });
});

function loadPatients() {
    var searchName = $('.search-bar input').val();
    
    $.get('/0201/myPatients', { searchName: searchName }, function(patients) {
        var tbody = $('.patients-table tbody');
        tbody.empty();
        
        patients.forEach(function(patient) {
            var row = $('<tr>');
            row.append($('<td>').text(patient.patientId));
            row.append($('<td>').text(patient.patientName));
            row.append($('<td>').text(patient.patientGender));
            row.append($('<td>').text(patient.patientAge));
            row.append($('<td>').text(patient.patientPhone || '-'));

            // 添加查看链接
            var viewLink = $('<a>', {
                href: 'javascript:void(0)',
                text: '查看',
                class: 'view-link',
                click: function() {
                    viewPatientDetail(patient.patientId);
                }
            });
            row.append($('<td>').append(viewLink));

            tbody.append(row);
        });
    });
}

function viewPatientDetail(patientId) {
    $.get('/0201/myPatients/detail/' + patientId, function(detail) {
        var modalContent = '<div class="modal-content">' +
            '<h3>病人详细信息</h3>' +
            '<div class="detail-info">' +
            '<p><strong>病人姓名：</strong>' + detail.patientName + '</p>' +
            '<p><strong>性别：</strong>' + detail.patientGender + '</p>' +
            '<p><strong>年龄：</strong>' + detail.patientAge + '</p>' +
            '<p><strong>联系电话：</strong>' + (detail.patientPhone || '-') + '</p>' +
            '<p><strong>住院信息：</strong>' + detail.floorNum + '楼 ' +
            detail.wardNum + '号房 ' + detail.bedNum + '号床</p>' +
            '<p><strong>病情描述：</strong>' + (detail.conditionDesc || '暂无描述') + '</p>' +
            '<p><strong>入住时间：</strong>' + (detail.date || '暂无描述') + '</p>'
            '</div></div>';

        showModal(modalContent);
    });
}
// 添加显示模态框的函数
function showModal(content) {
    // 如果已存在模态框，先移除
    $('.modal-overlay').remove();

    // 创建模态框
    var modalHtml = '<div class="modal-overlay">' +
        '<div class="modal-wrapper">' +
        content +
        '<button class="modal-close" onclick="closeModal()">关闭</button>' +
        '</div></div>';

    $('body').append(modalHtml);
}

// 添加关闭模态框的函数
function closeModal() {
    $('.modal-overlay').remove();
}
</script>

<style>
/* 表格样式优化 */
.patients-table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
}

.patients-table th,
.patients-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.patients-table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

.patients-table tr:hover {
    background-color: #f8f9fa;
}

/* 搜索栏样式优化 */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.search-bar input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.search-bar input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.search-btn {
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-btn:hover {
    background-color: #45a049;
}
</style> 